<template>
  <a-spin :spinning="confirmLoading" class="spin-style">
    <j-form-container :disabled="formDisabled" style="width: 100%;">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="24">
          <a-col :span="10">
            <a-row>
              <a-col>
                <a-form-model-item label="经度坐标" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lng">
                  <a-input v-model="model.lng" placeholder="请输入经度坐标"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="纬度坐标" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lat">
                  <a-input v-model="model.lat" placeholder="请输入纬度坐标"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col>
                <label class="tip-label-style">*请点击地图上的位置，以获取路口信息，可手动修改</label>
              </a-col>
              <a-col> 
                <a-form-model-item label="路口编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code" >
                  <a-input v-model="model.code" placeholder="请输入路口编号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="路口名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                  <a-input v-model="model.name" placeholder="请输入路口名称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="路口标签" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="crossTag">
                  <!-- <j-dict-select-tag style="width: 100%;" v-model="model.crossTag" title="请选择路口标签" dictCode="road_tag" placeholder="请选择路口标签"/> -->
                  <j-multi-select-tag
                    v-model="model.crossTag"
                    dictCode="road_tag"
                    placeholder="请选择">
                  </j-multi-select-tag>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="示范区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="zoneId">
                  <!-- <a-input v-model="model.zoneName" placeholder="请输入示范区"  ></a-input> -->
                  <j-dict-select-tag style="width: 100%;" v-model="model.zoneId" title="请选择示范区" dictCode="demonstration_zone" placeholder="请选择示范区"/>
                </a-form-model-item>
              </a-col>
              <!-- <a-col>
                <a-form-model-item label="行政区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="adminAreaId">
                  <j-area-linkage ref="areaLinkageRef" v-model="model.adminAreaId" type="select" @change="handleAdminAreaChange" style="float: left;width: 100%;"/>
                </a-form-model-item>
              </a-col> -->
              <a-col>
                <a-form-model-item label="所属道路" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="roadIds">
                  <a-select 
                    mode="multiple"
                    style="width: 100%;" 
                    v-model="model.roadIds" 
                    title="请选择所属道路" 
                    :options="roadOptions"
                    :filterOption="filterByLabel"
                    @change="handleRoadChange" 
                    placeholder="请选择所属道路"/>
                  <!-- <a-button style="margin-left: 5px;" type="primary" icon="plus-square" @click="addRoad"></a-button> -->
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="路口等级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="level">
                  <j-dict-select-tag style="width: 100%;" v-model="model.level" title="请选择路口等级" dictCode="cross_level" placeholder="请选择路口等级"/>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="路口形态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="crossForm">
                  <j-dict-select-tag style="width: 100%;" v-model="model.crossForm" title="请选择路口形态" dictCode="cross_form" placeholder="请选择路口形态"/>
                </a-form-model-item>
              </a-col>

            </a-row>
          </a-col>
          <a-col :span="14">
            <a-row>
              <div style="width: 800px; height: 650px">
                <!-- <div id="map_canvas" style="width: 500px; height: 500px"></div> -->
                <BMap :pageHeight="550" ref="map" :zoom="12" @update-lnglat="updateLnglat"></BMap>
              </div>
            </a-row>
            
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>

</template>

<script>
  import BMap from '@/views/components/map/index.vue'
  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { getRoadList } from '@/api/basicinfo/road/road'
  import JMultiSelectTag from '@/components/dict/JMultiSelectTag'

  export default {
    name: 'TCrossingForm',
    components: {
      JMultiSelectTag,
      BMap,
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        visible: true,
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          code: [
            {required: true, message: '请输入路口编号!'},
          ],
          name: [
            { required: true, message: '请输入路口名称!'},
          ],
          roadIds: [
            { required: true, message: '请选择所属道路!'},
          ],
          level: [
            { required: true, message: '请选择路口等级!'},
          ],
          crossForm: [
            { required: true, message: '请选择路口形态!'},
          ],
          crossTag: [
            { required: true, message: '请选择路口标签!'},
          ],
          zoneId: [
            { required: true, message: '请选择示范区!'},
          ],
          // adminAreaId: [
          //   { required: true, message: '请选择行政区!'},
          // ],
          lng: [
            { required: true, message: '请在地图上选择路口位置!'},
          ],
          lat: [
            { required: true, message: '请在地图上选择路口位置!'},
          ],
        },
        url: {
          add: "/basicinfo/roadSurface/crossing/add",
          edit: "/basicinfo/roadSurface/crossing/edit",
          queryById: "/basicinfo/roadSurface/crossing/queryById"
        },
        roadOptions: [],
        markerImagePath: 'assets/icons/map/cross-orange.png',
        markerImageWidth: 34,
        markerImageHeight: 40,
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.initRoadList();
    },
    methods: {
      add () {
        const that = this;
        this.edit(this.modelDefault);
        this.model = {
          lng: null,
          lat: null,
          roadIds: [],
          adminAreaId: ''
        };
        let lnglat = {"lng":this.$refs.map.mapCenter.lng, "lat":this.$refs.map.mapCenter.lat};
        this.$refs.map.setCenterAndZoom(lnglat, this.$refs.map.zoom);
        this.$refs.map.onclickEventByAddMarker(that.markerImagePath, that.markerImageWidth, that.markerImageHeight, (e)=>{
          console.log(e);
        })
      },
      edit (record) {
        const that = this;
        this.model = Object.assign({}, record); 
        this.visible = true;
        let lnglat = {"lng": record.lng, "lat": record.lat};
        // const item = {"name": record.name, "sx": 0, "zy": 0, "scale":0.5, "color": "#000000", "bg": "point-pole"}
        // this.$refs.map.addMarker(lnglat, item, record.id);
        this.$refs.map.addImageMarker(lnglat, {iconPath: that.markerImagePath, width: that.markerImageWidth, height: that.markerImageHeight});
        this.$refs.map.setCenterAndZoom(lnglat, this.$refs.map.zoom);
        this.$refs.map.onclickEventByAddMarker(that.markerImagePath, that.markerImageWidth, that.markerImageHeight, (e)=>{
          console.log(e);
        })
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            console.log('this.model: ', this.model);

            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
      //初始化道路字典
      initRoadList(){
        getRoadList().then((res)=>{
          if(res.success){
            this.roadOptions = res.result.map((item,index,arr)=>{
              let c = { label:item.roadName, value:item.id }
              return c;
            })
            // console.log('this.roadOptions: ',this.roadOptions)
          }
        });
      },
      filterByLabel(input, option) {
        console.log('input: ', input);
        console.log('option: ', option);
        return option.componentOptions.children[0].text.toLowerCase().includes(input.toLowerCase());
      },
      handleRoadChange(val){
        console.log('val: ', val);
      },
      handleAdminAreaChange(val){
        this.model.adminAreaName = this.$refs.areaLinkageRef.areaData.getText(val);
         console.log('adminAreaName: ', this.model.adminAreaName);
      },
      updateLnglat(latlng){
        console.log('latlng: ', latlng);
        // console.log('this: ', this);
        console.log('this.model: ', this.model);
        this.model.lng = latlng.lng;
        this.model.lat = latlng.lat;        
      }
    }
  }
</script>
<style  scoped>
div.ant-modal, div.ant-modal-content {
    width: 1480px;
}
.spin-style{
    width: 1280px;
}
.tip-label-style{
  font-size: 10px;
  color: red;
}
.area-select.medium{
  width: 100px;
}
</style>